<script setup>
import ModalBox from '@/components/ModalBox/ModalBox.vue'
import { companyCreateEdit } from '@/apis/organizationsManaging/unitManaging'
import { reactive, ref, inject, watch, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { Form } from 'ant-design-vue';
const useForm = Form.useForm;
const open = ref(false);
const formRef = ref();

const formState = reactive({
    id: "",
    name: "",
    type: "",
    pid: "",
    tel: "",
    description: "",
});
const companyTypeEnue = {
    GC: '集团公司',
    SD: '子公司',
    OPC: '一人有限责任公司',
    LC: '有限责任公司',
    JS: '股份制企业',
    UC: '无限公司'
}
watch(open, (data) => {
    console.log(data);
    if (!data) {
        for (const key in formState) {
            formState[key] = ""
        }
    }
})

const { resetFields, validate, validateInfos } = useForm(
    formState,
    reactive({
        name: [{ required: true, message: '请填写公司名称', trigger: 'change', }],
        type: [{ required: true, message: '请选择公司类型', trigger: 'change', }],
        tel: [{ required: true, message: '请填写电话', trigger: 'change', }],
    }),
);
const options = inject('companyTreeData')
const queryCompanyTreeList = inject('getCompanyTreeDatalist', Function, false);
const handleOk = (options) => {
    validate()
        .then(res => {
            craeteEdit()
        })
        .catch(err => {
            console.log('error', err);
        });
    // open.value = false
}
const craeteEdit = () => {
    companyCreateEdit(formState).then(res => {
        if (res.code === 1) {
            queryCompanyTreeList();

        } else {
            message.error(res.msg);
        }
        open.value = false
    })
}
const handleCancel = () => {
    open.value = false
}
defineExpose({ open, formState })

</script>
<template v-if="open">
    <modal-box :title="!formState.id ? '创建公司' : '编辑公司'" :isOpen="open" @ok="handleOk" @cancel="handleCancel" width="600px">
        <template #content>
            <div>
                <a-form ref="formRef" :model="formState" @finish="handleOk">
                    <a-form-item label="公司名称" v-bind="validateInfos.name">
                        <a-input v-model:value="formState.name" />
                    </a-form-item>
                    <a-form-item label="联系电话" v-bind="validateInfos.tel">
                        <a-input v-model:value="formState.tel" />
                    </a-form-item>
                    <a-form-item label="公司类型" v-bind="validateInfos.type">
                        <a-select ref="select" v-model:value="formState.type" :allowClear="true">
                            <a-select-option v-for="(item, index) of companyTypeEnue" :key="index" :value="index">{{ item
                            }}</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item ref="name" label="上级公司">
                        <a-select ref="select" v-model:value="formState.pid" :allowClear="true">
                            <a-select-option v-for="item in options" :value="item.id">{{ item.title }}</a-select-option>
                        </a-select>
                        <!-- <a-cascader v-model:value="formState.pid" :options="options" :fieldNames="{
                            label: 'title', value: 'id', children: 'children'
                        }" placeholder="请选择上级公司" /> -->
                    </a-form-item>
                    <a-form-item ref="name" label="公司描述" class="description">
                        <a-textarea v-model:value="formState.description" placeholder="请填写公司描述" :rows="4" />
                    </a-form-item>
                </a-form>
            </div>
        </template>
    </modal-box>
</template>
<style lang='scss' scoped>
.description {
    width: 100% !important;
    margin-right: 0px !important;
}

:deep(.ant-form) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

:deep(.ant-form-item) {
    width: calc((100% - 10px) / 2);
    margin-right: 10px;

    &:nth-child(2n) {
        margin-right: 0;
    }
}

:deep(.ant-form-item-label) {
    width: 80px;
}
</style>